<template>
	<view class="content">
		<view class="inputbkc">
			<input  @click="show()" v-model="birthday" class="uni-input" disabled="true" placeholder="选择出生日期" />
		</view>
		<view class="tishi">
			<image class="tsico" src="../../static/images/umcsdk_exception_icon.png"></image>
			<text class="tstxt">每半年只能修改一次</text>
		</view>
		<view>
			 <button class="btn" @click="riqiqueding()">确定</button>
		</view>
		<view :class="{'share': shareState}" @click="hidden" v-if="shareState">
			<view class="box">
		    <view class="share-item">
				<picker-view class="picker-view" v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
		    </view>			
			<view class="footer">
				<text class="txt" @click.stop="hidden">取消</text>
				<text class="txt" @click.stop="checkriqi">确定</text>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// data() {
		// 	return {
				
		// 	}
		// },
		data: function () {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1900; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				uid: '', // 用户id
				birthday: '', // 生日
				shareState: false, // 弹出或者隐藏图层
			}
		},
		onLoad(option) {
			this.uid = option.uid;
			this.birthday = option.birthday;
		},
		methods: {
			// 选择日期
			bindChange: function (e) {
				const val = e.detail.value;
				this.year = this.years[val[0]];
				this.month = this.months[val[1]];
				this.day = this.days[val[2]];
			},
			// 显示
			show() {
			    this.shareState = true;
				console.log(JSON.stringify(this.years));
			},
			// 隐藏
			hidden() {
			    this.shareState = false;
			},
			// 选择日期
			checkriqi() {
				// console.log(this.year);
				if(this.month < 10)
				{
					var month = '0' + this.month;
				}
				else {
					var month = this.month;
				}
				if(this.day < 10)
				{
					var day = '0' + this.day;
				}
				else {
					var day = this.day;
				}
				this.birthday = this.year + '-' + month + '-' + day;				
				this.hidden();				
			},
			riqiqueding() {
				// 更新保存生日
				// 日期变成时间戳
				console.log(1);
				let d = new Date(this.birthday);
				let birthday = d.getTime(d) / 1000;
				// console.log(JSON.stringify(birthday));
				uni.request({
					url: 'https://www.yedushu.cn/api/saveshengri', // 保存设置的生日
					method:'POST',
					data: {
						uid: this.uid,
						birthday: birthday
					},
					success: (res) => {
						// console.log(JSON.stringify(res.data.code));
						if(res.data.code == 1) {
							// 修改成功
							var userinfo = uni.getStorageSync('userinfo');
							// console.log(JSON.stringify(userinfo));
							userinfo['birthday'] = birthday; // 设置对象中的值
							uni.setStorageSync('userinfo', userinfo);  // 重新存储到本地
							// console.log(JSON.stringify(userinfo));
							// 触发资料与帐号设置（setmyselft.vue）页上的事件，更新用户生日
							uni.$emit("setshengri",{
									shengri: this.birthday,
								},
							);
							// 返回到上一页面
							uni.navigateBack({
							    delta: 1
							});
						}
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		padding: 10px 10px;
	}
	.inputbkc {
		background-color: #f4f4f4;
		padding: 7px 7px;
		border-radius: 7px;
	}
	.uni-input {
		padding-left: 5px;
		font-size: 15px;
	}
	.tishi {
		padding: 10px 5px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.tishi .tsico {
		width: 15px;
		height: 15px;
	}
	.tishi .tstxt {
		font-size: 12px;
		padding-left: 5px;
		color: #b2b2b2;
	}
	.btn {
		background-color: #00cc33;
		color: #FFFFFF;
	}
	
	.share {
		position: fixed;
		top: 0rpx; left: 0rpx; bottom: 0rpx; right: 0rpx;
		background-color: rgba(0, 0, 0, 0.4);
		transition: .3s;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}	
	.share-item {	
		background-color: #FFFFFF;
	}
	.picker-view {
		width: 600rpx;
		height: 600rpx;
	}
	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.footer {
		display: flex;
		padding: 10px 0;
		background-color: #FFFFFF;
		justify-content: flex-end;
	}
	.txt {
		padding-right: 15px;
		font-size: 15px;
	}
</style>
